<template>
  <div>
    <!--头部登录导航条-->
    <Header></Header>

    <!--首页顶部轮播广告-->
    <div style=" width:1200px; margin:0px auto; margin-top:20px;">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="(item, index) in adList" :key="index">
          <a :href="item.link">
            <img :src="item.img" style="width:100%;height:100%;object-fit:cover"/>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!--容器-->
    <div style="width: 1200PX; min-height:500px; margin:0px auto;">

      <!--课程列表-->
      <div style="width: 850PX;display: inline-block;  ">
        <el-tabs v-model="activeName">
          <el-tab-pane label="选课" name="allLesson">
            <ul class="course-ul-pc">
              <!-- 课程信息展示开始 -->
              <li class="course-li" v-for="(item , index) in courseList" :key="index">
                <!-- 课程封面图 -->
                <img
                  :src="item.courseImgUrl"
                  class="teacher-portrait hover-pointer"
                />
                <!-- 课程文字信息 -->
                <div class="content-main">
                  <!-- 课程标题 -->
                  <div class="content-title hover-pointer">
                    <div
                      class="p-title"
                      style="text-align:left;"
                      @click="gotoDetail(item)"
                    >
                      <span>
                        {{item.courseName}}
                      </span>
                    </div>
                    <!-- 作者和职称 -->
                    <p class="p-title-buy text-overflow">
                      <span class="p-author-span">
                        {{item.teacher.teacherName}}
                      </span>
                      <span class="p-author-line" />
                      <span class="p-author-span">
                        {{item.teacher.position}}
                      </span>
                    </p>
                    <p></p>
                    <!-- 课程简单描述 -->
                    <p class="p-describe" style="text-align:left;">
                      {{item.brief}}
                    </p>
                  </div>
                  <!-- 课程前两个章节信息 -->
                  <ul class="content-course" style="text-align:left;">
                    <!-- 章节1 : 免费试看，通常是第一章的前两节课 -->
                    <li
                      class="content-course-lesson text-overflow"
                      style="width:300px" 
                      v-for="(lesson , index) in item.lessonsDTO2" :key="index">
                      <!-- 免费试看图标 -->
                      <img
                        src="@/assets/course-list/free-course.png"
                        class="free-label hover-pointer"
                      />
                      <span class="theme-span hover-pointer">
                        {{lesson.theme}}
                        </span>
                    </li>
                    
                  </ul>
                  <!-- 价格信息 -->
                  <div class="content-price" style="text-align:left;">
                    <p class="content-price-p">
                      <span class="content-price-orange-sm">￥</span>
                      <span class="content-price-orange">{{item.discounts}}</span>
                      <span class="current-price">
                        <span class="current-price-unite">￥</span>
                        {{item.price}}
                      </span>
                      <span class="activity-name">成就自己</span>
                      <span class="content-price-buy">{{item.sales}}人购买</span>
                    </p>
                    <div class="btn btn-green btn-offset" @click="buy(item)">立即购买</div>
                  </div>
                </div>
              </li>
              <!-- 课程信息结束 -->
              
            </ul>

          <!-- 微信支付二维码
          <el-dialog :visible.sync="dialogFormVisible" :before-close="cancelOrder" :modal="true" :close-on-click-modal="false" style="width:800px;margin:0px auto;" >
            <h1 style="font-size:30px;color:#00B38A" >微信扫一扫支付</h1>
            <div id="qrcode" style="width:210px;margin:20px auto;"></div>
            <h2 id="statusText"></h2>
            <p id="closeText"></p>
          </el-dialog>
          -->

          </el-tab-pane>
          <el-tab-pane label="已购" name="hasPay">
            <div v-if="!isLogin">
              <img src="@/assets/course-list/no-login@2x.png" class="no-data-icon"/>
              <div class="no-data-title">您还没有登录</div>
              <div class="no-data-title">登录后即可查看已购课程</div>
              <div class="btn btn-yellow btn-center">立即登录</div>
            </div>
            <div v-if="isLogin">
              <ul class="course-ul-pc">
              <!-- 课程信息展示开始 -->
              <li class="course-li" v-for="(item , index) in myCourseList" :key="index">
                <!-- 课程封面图 -->
                <img
                  :src="item.courseImgUrl"
                  class="teacher-portrait hover-pointer"
                />
                <!-- 课程文字信息 -->
                <div class="content-main">
                  <!-- 课程标题 -->
                  <div class="content-title hover-pointer">
                    <div
                      class="p-title"
                      style="text-align:left;"
                      @click="gotoDetail(item)"
                    >
                      <span>
                        {{item.courseName}}
                      </span>
                    </div>
                    <!-- 作者和职称 -->
                    <p class="p-title-buy text-overflow">
                      <span class="p-author-span">
                        {{item.teacher.teacherName}}
                      </span>
                      <span class="p-author-line" />
                      <span class="p-author-span">
                        {{item.teacher.position}}
                      </span>
                    </p>
                    <p></p>
                    <!-- 课程简单描述 -->
                    <p class="p-describe" style="text-align:left;">
                      {{item.brief}}
                    </p>
                  </div>
                  <!-- 课程前两个章节信息 -->
                  <ul class="content-course" style="text-align:left;">
                    <!-- 章节1 : 免费试看，通常是第一章的前两节课 -->
                    <li
                      class="content-course-lesson text-overflow"
                      style="width:300px" 
                      v-for="(lesson , index) in item.lessonsDTO2" :key="index">
                      <!-- 免费试看图标 -->
                      <img
                        src="@/assets/course-list/free-course.png"
                        class="free-label hover-pointer"
                      />
                      <span class="theme-span hover-pointer">
                        {{lesson.theme}}
                        </span>
                    </li>
                    
                  </ul>
                  <!-- 价格信息 -->
                  <div class="content-price" style="text-align:left;">
                    <p class="content-price-p">
                      <span class="content-price-orange-sm">￥</span>
                      <span class="content-price-orange">{{item.discounts}}</span>
                      <span class="current-price">
                        <span class="current-price-unite">￥</span>
                        {{item.price}}
                      </span>
                      <span class="activity-name">成就自己</span>
                      <span class="content-price-buy">{{item.sales}}人购买</span>
                    </p>
                    <div class="btn btn-yellow btn-offset">好好学习</div>
                  </div>
                </div>
              </li>
              <!-- 课程信息结束 -->
              
            </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!--微信连接-->
      <div style="width:330px; height:350px; display: inline-block; float:right;" >
        <p  class="title">精选文章</p> 
        <ul class="article-content">
          <li>即将淘汰的java技术，曾经都是王者</li>
        </ul>
        <p  class="split-line"  style="margin-bottom:20px;"   >
          <span  class="split-word">还可以在这里找到我们</span>
        </p> 
        <ul  class="social-list" >
          <li  class="social-item"  >
            <div id="qr-wrapper"  class="qr-wrapper" style="display: none;" @mouseout="hideqr()">
              <img  src="../assets/wechat-qr.47ac3f5.png" alt="二维码" class="qr-wrapper-img">
            </div> 
            <img @mouseover="showqr()"  src="" alt="微信" class="social-item-img"> 
            <p  class="social-name">微信</p>
          </li>
          <li  class="social-item hover-pointer" @click="gozhihu()" >
              <img  src="" alt="知乎" class="social-item-img"> 
              <p  class="social-name">知乎</p>
          </li>
          <li  class="social-item hover-pointer" @click="gowb()">
            <img  src="" alt="微博" class="social-item-img"> 
            <p  class="social-name">微博</p>
          </li>
        </ul>
      </div>

    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./Header/Header"; //顶部登录条
import Footer from "./Footer/index"; //顶部登录条
import jwtDecode from 'jwt-decode';
import qs from 'qs';

export default {
  name: "Index",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      activeName: "allLesson",
      courseList:[],  // 课程集合
      myCourseList:[], // 我购买过的课程列表
      isLogin:false, //登录状态
      user:null, // 已登录的用户对象信息
      adList:null, //广告集合
    };
  },
  created() {

    // 加载顶部轮播广告
    this.getAdList();

// 从url中获取token参数
    let token  = this.getValueByUrlParams('token');

    if(token == null || token == ""){
      // 从cookie中获取user的token
      // token = this.getCookie("user");
      token = document.cookie.split("=")[1]
    }

    this.token = token;
   
    console.log("index刷新页面token=>"+token);
    if(token != null || token != ""){
      // 将token发送到sso进行校验
      this.axios
      .get("http://localhost:81/user/checkToken",{
        params:{
          token:token
        }
      })
      .then( (result)=>{
        console.log(  result );
        if(result.data.state == 4){
          this.isLogin = true;
          this.setCookie("user",token,600);
          this.user = jwtDecode(token);
          // console.log(  this.user );
          // 获取已购买的课程列表
          this.getMyCourseList();
        }
      })
      .catch( (error)=>{
       });
    }
    this.getCourseList(); //当组件创建完毕，就调用获取所有课程的方法
    
  },
  methods: {
    changeCourseTab(tabName) {
      this.classSelect = tabName;
      sessionStorage && sessionStorage.setItem("courseTab", tabName);
    },
    gotoDetail(item) {
      this.$router.push({ name: "Course", params: { course: item } });
    },
    // 去课程微服务 获取 全部课程
    getCourseList(){ 
      return this.axios
      .get("http://localhost:8004/course/getAllCourse")
      .then((result) => {
        console.log(result);
        this.courseList = result.data;
      }).catch( (error)=>{
        this.$message.error("获取课程信息失败！");
      } );
    },
    // 获取已购的课程列表
    getMyCourseList(){
      return this.axios
      .get("http://localhost:8004/course/getCoursesByUserId",{
          params:{
            userid:this.user.userid
          }
      }).then((result) => {
          console.log(result);
          this.myCourseList = result.data;
      }).catch( (error)=>{
          this.$message.error("获取已购买的课程信息失败！");
      });
    },
    // 加载顶部轮播广告
    getAdList(){
      return this.axios
      .get("http://localhost:8001/ad/getAdsBySpaceId/1")
      .then((result) => {
        console.log(result);
        this.adList = result.data;
      }).catch( (error)=>{
        this.$message.error("获取轮播广告失败！");
      } );
    },
    // 显示微信公众号二维码
    showqr(){
        document.getElementById("qr-wrapper").style.display = "block";
    },
    // 隐藏微信公众号二维码
    hideqr(){
      document.getElementById("qr-wrapper").style.display = "none";
    },
    // 跳转到知乎
    gozhihu(){
      window.open('https://www.zhihu.com/org/la-gou-kai-wu-xun-lian-ying');
    },
    // 跳转到微博
    gowb(){
      window.open('https://weibo.com/p/1006066707072494/home?from=page_100606&mod=TAB&is_hot=1#place');
    },
    //设置cookie
    setCookie(key,value,expires){
      var exp = new Date();
      exp.setTime(exp.getTime() + expires*1000);
      document.cookie = key + "=" + escape (value) + ";expires=" + exp.toGMTString();
    },
    //从cookie中获取token
    getCookie(key){
      var name = key + "=";
      if(document.cookie.indexOf(';') > 0){
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i].trim();
            if (c.indexOf(name)==0) { 
              return c.substring(name.length,c.length); 
            }
        }
      }
      return "";
    },
    //删除cookie
    delCookie(name){
      // 删除cookie只需要将值清空即可
      // -1 让指定名为name的cookie过期实现自动清除，如果不赋值-1的话，只是将对应的cookie值删除，而这条cookie记录并没有删除
      this.setCookie(name,'',-1);
    },
    // 获取url中参数
    getValueByUrlParams(paramKey) {
      // http://localhost:8080/#/?token=1&id=2
      var url = location.href;
      var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
      var paraObj = {}
      var i, j
      for (i = 0; j = paraString[i]; i++) {
          paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
      }
      var returnValue = paraObj[paramKey.toLowerCase()];
      if (typeof(returnValue) == "undefined") {
          return "";
      } else {
          return returnValue;
      }
    },
  },
  
};
</script>


<style lang="less" scoped>
@import "../assets/less/common.less";


.qr-wrapper{
    position: absolute;
    width: 140px;
    height: 140px;
    display: block;
    z-index: 10;
    background: #fff;
    border: 1px solid #e3ebe9;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.08);
    border-radius: 3px;
    box-sizing: border-box;
    left: -30px;
    top: -150px;
}

p {
  margin-top: 0;
}
li {
  list-style: none;
}
.social-item{
      display: inline-block;
    position: relative;
    width: 80px;
    height: 62px;
}
.social-item-img {
    width: 32px;
    height: 32px;
}
.split-word{
    display: inherit;
    color: #999;
    font-size: 14px;
    margin: 0 10px;
    position: relative;
}
.split-word:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 30px;
    height: 1px;
    background-color: #d8d8d8;
    margin: 10px 0 0 -44px;
}
 .split-word:after {
    margin: 10px 0 0 13px;
    content: "";
    display: inline-block;
    position: absolute;
    width: 30px;
    height: 1px;
    background-color: #d8d8d8;
}
.article-content{
    font-size: 14px;
    margin-bottom: 40px;
}
ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.title {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 500;
}
flex {
  display: flex;
}
.btn(@a, @b) {
  background-color: @a;
  color: @b;
  border: 1px solid @a;
}
.course-ads {
  margin-bottom: 20px;
  cursor: pointer;
  width: 100%;
  max-height: 280px;
  overflow: hidden;
  img {
    width: 100%;
    border-radius: 2px;
  }
}
.tab-container {
  width: 100%;
  height: 60px;
  background: #ffffff;
  border-bottom: 1px solid #ededed;
}
.vux-tab.course-tab {
  box-sizing: border-box;
  height: 60px;
  width: 200px;
  overflow: hidden;
  font-size: 20px;
  .vux-tab-container {
    width: 260px;
  }
  .vux-tab-item {
    cursor: pointer;
    background: none;
    line-height: 60px;
    font-size: 20px;
  }
  .vux-tab-ink-bar {
    bottom: -1px;
    .vux-tab-bar-inner {
      height: 2px;
    }
  }
}
.tab-container {
  width: 100%;
  height: 60px;
  background: #ffffff;
  border-bottom: 1px solid #ededed;
}
.course-ul {
  padding: 0 20px;
}
.hover-pointer {
  cursor: pointer;
}
.course-ul-pc .course-li {
  padding: 30px 0 40px 0;
  border-bottom: 1px solid #ededed;
  position: relative;
  &:last-child {
    border-bottom: 0;
  }
}
.current-price {
  font-size: 12px;
  color: #999;
  font-weight: 600;
  text-decoration: line-through;
}
.current-price-unite {
  font-size: 12px;
  margin-right: -4px;
}
.p-author-line {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  position: absolute;
  background: #999;
  margin-left: 5px;
  top: 3px;
}
.teacher-portrait {
  width: 121px;
  height: 159px;
  border-radius: 4px;
  float: left;
}
.content-main {
  line-height: 1.4;
  margin-left: 141px;
  position: relative;
  height: 150px;
}
.content-main .p-title {
  font-size: 20px;
  color: #333;
  font-family: PingFangSC-Medium, PingFang SC;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 350px;
}
.course-ul-pc .content-main .p-title-buy {
  font-size: 12px;
  color: #999;
  display: inline-block;
  margin-top: 6px;
  position: relative;
  float: right;
  top: -28px;
  font-weight: 400;
}
p {
  margin-top: 0;
}
.course-ul-pc .p-author-line {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  position: absolute;
  background: #999;
  margin-left: 5px;
  top: 3px;
}
.text-overflow {
  word-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.course-ul-pc .content-main .p-describe {
  font-size: 14px;
  margin-top: 5px;
  color: #333;
  word-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.course-ul-pc .content-main .p-author-span:not(:first-child) {
  margin-left: 18px;
}
.course-ul-pc .content-main .content-course {
  font-size: 14px;
  padding-top: 25px;
  color: #666;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.course-ul-pc .content-main .content-course-lesson {
  display: inline-block;
  width: 304px;
  margin: 2px 40px 6px 0;
}
.course-ul-pc .content-main .content-course .free-label {
  width: 50px;
  height: 16px;
  margin: 1px 5px 0 0;
}
.course-ul-pc .content-main .content-course-lesson:nth-child(2n) {
  margin-right: 0;
}

.course-ul-pc .content-main .content-course-lesson {
  display: inline-block;
  width: 304px;
  margin: 2px 40px 6px 0;
}
.course-ul-pc .content-main .content-price {
  height: 28px;
  line-height: 28px;
  position: absolute;
  width: 100%;
  bottom: -4px;
}
.course-ul-pc .content-main .content-price-p {
  font-size: 0;
}
.course-ul-pc .content-main .content-price-orange-sm {
  color: #ff7452;
  font-size: 14px;
}

.content-course {
  font-size: 14px;
  padding-top: 25px;
  color: #666;
}
.content-course.free-label {
  width: 50px;
  height: 16px;
  margin: 1px 5px 0 0;
}

.content-course-lesson {
  display: inline-block;
  width: 304px;
  margin: 2px 40px 6px 0;
}
.content-course-lesson:nth-child(2n) {
  margin-right: 0;
}
.disabled-word {
  color: #999;
  cursor: default;
}
.theme-span :hover {
  color: #0abf89;
}

.content-price-p {
  font-size: 0;
}
.content-price-orange {
  color: #ff7452;
  font-size: 20px;
}
.content-price-buy {
  font-size: 14px;
  color: #999;
  margin-left: 20px;
  transform: translate(8px, -2px);
  display: inline-block;
}
.content-price-grey {
  color: #999;
  font-size: 12px;
  margin-left: 5px;
}
.content-price-buyed {
  color: #999;
  font-size: 14px;
}
.content-price {
  height: 28px;
  line-height: 28px;
  position: absolute;
  width: 100%;
  bottom: -4px;
}
.activity-name {
  font-size: 12px;
  line-height: 14px;
  color: rgba(255, 255, 255, 1);
  padding: 2px 4px;
  background: linear-gradient(
    180deg,
    rgba(255, 137, 110, 1) 0%,
    rgba(255, 123, 92, 1) 100%
  );
  border-radius: 2px;
  display: inline-block;
  transform: translate(6px, -3px);
}
.p-title {
  font-size: 20px;
  color: #333;
  font-family: PingFangSC-Medium, PingFang SC;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 350px;
}
.p-title-dec {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.p-title-buy {
  // .font(12px);
  font-size: 12px;
  color: #999;
  display: inline-block;
  margin-top: 6px;
  position: relative;
  // .fr;
  top: -28px;
  font-weight: normal;
}

.companion-reading {
  background: rgba(0, 179, 138, 0.06);
  border-radius: 2px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #00b38a;
  display: inline-block;
  padding: 0 8px;
  height: 22px;
  line-height: 22px;
  margin-left: 10px;
  vertical-align: text-bottom;
  position: relative;

  .triangle {
    position: absolute;
    top: 12px;
    left: -3px;
    width: 0;
    height: 0;
    content: "";
    border: 5px solid;
    border-color: transparent transparent white white;
    transform: rotate(45deg);
    box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.08);
  }
}
.companion-tip {
  display: none;
  position: absolute;
  font-family: HiraginoSansGB-W3;
  font-size: 14px;
  color: #777777;
  background: #ffffff;
  border: 1px solid #e3ebe9;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  line-height: 29px;
  top: -7px;
  word-break: keep-all;
  left: 80px;
  padding: 0 10px;
  width: 200px;
  z-index: 2;
}
.companion-reading:hover .companion-tip {
  display: inline-block;
}
.companion-reading:hover .companion-tip {
  display: block;
}
.p-describe {
  // .font(14px);
  font-size: 14px;
  margin-top: 5px;
  color: #333;
  // .text-overflow;
}
.p-author + p {
  margin-top: 0;
}
.p-author {
  margin: 10px 0 5px 0;
  // .font(12px);
  font-size: 12px;
  color: #999;
  position: relative;

  .p-author-line {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    position: absolute;
    background: #999;
    margin-left: 5px;
    top: 3px;
  }
}
.p-author-span:not(:first-child) {
  margin-left: 18px;
}

.course-ul-container {
  width: 850px;
  display: inline-block;
  float: left;
}
.course-ul {
  padding: 0 20px;
}
.course-ul-pc {
  width: 790px;
  background-color: #fff;
  padding: 0 30px;
  // .fl;
}
.tag-icon {
  width: 57px;
  height: 18px;
  position: absolute;
  top: 30px;
  left: 0;
}

.more-icon {
  width: 10px;
  height: 10px;
  vertical-align: middle;
}
.btn {
  width: 94px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 14px;
  box-sizing: content-box;
  &-green {
    .btn(#00b38a, #fff);
    &:hover {
      background: #00a57f;
      border-color: #00a57f;
    }
  }
  &-yellow {
    .btn(#fcd766, #fff);
    &:hover {
      background: #f0d071;
      border-color: #f0d071;
    }
  }
  &-white {
    .btn(#fff, #00b38a);
    border: 1px solid #00b38a;
    &:hover {
      color: #fff;
      border-color: #00b38a;
      background-color: #00b38a;
    }
  }
  &-offset {
    position: absolute;
    right: 0;
    top: -4px;
  }
}

.btn-center {
  margin: 10px auto;
}

.no-data-title {
  font-size: 20px;
  color: #333;
  font-weight: 500;
}
</style>